<template>
  <div class="home">
    <h1>欢迎您，来学习中心学习</h1>
    <div>请选择一门课程学习</div>
    <div>
      <button v-for="(item,index) in kechengs" :key="index" 
      @click="selectKeCheng(index)">{{index}}{{item}}</button>
      <div>您选择了{{kecheng}}课程</div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onRenderTracked,
  onRenderTriggered,
  watch} from "vue";
interface DataProps {
  kechengs: string[];
  kecheng: string;
  selectKeCheng: (index: number) => void;
}
export default defineComponent({
  name: "Home",
  setup(){ 
     console.log("1-开始创建之前---setup")  
    const data: DataProps = reactive({
        kechengs:["语文","数学","英语"],
        kecheng : "",
        selectKeCheng:(index: number)=>{
          data.kecheng = data.kechengs[index];
      }
    })
    onBeforeMount(()=>{
      console.log("2-组件挂载页面之前---onBeforeMount")
    })
    onMounted(()=>{
      console.log("3-组件挂载页面之后---onMounted")
    })
    onBeforeUpdate(()=>{
      console.log("4-组件更新之前---onBeforeUpdate")
    })
    onUpdated(()=>{
      console.log("5-组件更新之后---onUpdated")
    })
    onRenderTracked((event)=>{
      console.log("状态跟踪的钩子函数-------onRenderTracked")
       console.log(event)
    })
    onRenderTriggered((event)=>{
      console.log("状态跟踪的钩子函数-------onRenderTriggered")
       console.log(event)
    })
    watch([() => data.kecheng], (oldVlaue, newValue) => {
      console.log(oldVlaue, newValue, '改变')
    })
    const refData = toRefs(data);
    return {
      ...refData
    }
  }
});
</script>
